import { Route, HashRouter, Link, Switch, Redirect } from 'react-router-dom'
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from "@ethersproject/providers";

import MateMask from './page/MateMask'
import WallectConnect from './page/WallectConnect'
import Web3Base from './page/Web3Base'
import Test from './page/Test'

function App() {

  function getLibrary(provider) {
    return new Web3Provider(provider) // this will vary according to whether you use e.g. ethers or web3.js
  }

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        <HashRouter>
          <ul>
            <li><Link to='/MateMask'>MateMask 基础操作</Link></li><br />
            <li><Link to='/WallectConnect'>Wallect Connect 钱包操作</Link></li><br />
            <li><Link to='/Web3Base'>Web3 基础操作要领</Link></li><br />
            <li><Link to='/Test'>HECO 刷票</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route path='/' exact render={() => { return <Redirect to='/MateMask' /> }} />
            <Route path='/MateMask' exact component={MateMask} />
            <Route path='/WallectConnect' exact component={WallectConnect} />
            <Route path='/Web3Base' exact component={Web3Base} />
            <Route path='/Test' exact component={Test} />
          </Switch>
        </HashRouter>
      </div>
    </Web3ReactProvider>
  );
}

export default App;
